<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
        class App extends React.Component {
        render() {
            return (
                <form name={"myForm"}>
                    <div ref={(el)=>{
                        // el即是ref属性所在的真实DOM元素
                        // console.log("10000000",el)
                        this.myDiv = el;
                    }}>100</div>
                    <input ref={el=>this.userName=el} name={"userName"} type="text"/>
                    <Child ref={el=>this.child=el}></Child>
                    <button onClick={(e) => {
                        e.preventDefault();
                        // console.log(this.myDiv.innerText)
                        // console.log(this.userName.value)
                        // console.log(this.child.state.a)
                        // console.log(this.child.state.b)
                        this.child.setState({
                            a:100,
                            b:200
                        })

                    }}>点我
                    </button>
                </form>
            )
        }
    }

    class Child extends React.Component {
        state = {
            a: 1,
            b: 2
        }

        render() {
            return (
                <div>
                    <h3>Child</h3>
                    <p>a:{this.state.a}</p>
                    <p>b:{this.state.b}</p>
                </div>
            )
        }
    }
    ReactDOM.createRoot(document.getElementById('root')).render(<App/>)

    </script>
</body>

</html>